В данном уроке мы рассмотрим реализацию слайдера в шапке сайта с помощью компонента 1С-Битрикс.
Для начала мы пометим весь слайдер во включаемую область для страницы. Этим мы решим проблему отображения слайдера на главной странице и не отображения на внутренних - при необходимости вывода включаемой области на других страницах мы создадим отдельные файлы включаемых областей.
Код слайдера:
| <div class="slider">
<div class="camera_wrap"> <div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide1.jpg"></div> <div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide2.jpg"></div> <div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide3.jpg"></div> </div> </div> |
Код включаемой области:
| <?$APPLICATION->IncludeComponent(
"bitrix:main.include", "", Array( "AREA_FILE_SHOW" => "page", "AREA_FILE_SUFFIX" => "slider", "EDIT_TEMPLATE" => "" ) );?> |
Код слайдера в шаблоне заменяем кодом включаемой области и переносим в файл index_slider.php в корне сайта (мы будем показывать слайдер только на главной странице).
Создание компонента слайдера
Мы создадим очень простой компонент слайдера. Для начала создадим пустую страницу, например, 1.php где разместим компонент bitrix:news.list.
Подготовка данные (создание и заполнение инфоблока)
Поскольку у нас до сих пор не было ни одного инфоблока, создадим тип инфоблока Template:
Создадим инфоблок в новом типе:
Основные настройки для данного инфоблока будут:
- Инфоблок будет активен
- Символьный код - MAIN_SLIDER
- Выберем один из сайтов системы в качестве сайта по умолчанию (тот, где будет использоваться слайдер)
- Уберём галочки индексации разделов и элементов для поиска (нет смысла искать слайдер)
- Поставим совместных режим просмотра элементов и разделов (это сугубо личное предпочтение автора урока)
- Дадим доступ на чтение тем группам пользователей, которым он необходим. Если вы работаете над уже запущенным проектом в скрытом разделе, то возможно доступ для всех и не нужен. Однако мы сразу установим чтение для всех, в том числе неавторизованных юзеров, чтобы не возвращаться потом к этому вопросу.
Теперь в новом инфоблоке необходимо создать активные элементы, соответствующие слайдам.
Можно создать руками все элементы:
Важно при этом не забыть:
- поставить галочку активности элементов
- заполнить название (это обязательный пункт), например порядковым номером слайдера
- в поле "картинка для анонса" приложить изображение
Для этого урока нами был создан вручную только 1 элемент. Далее мы экспортировали его в XML и добавили информацию о ещё 2 слайдах. Вы можете найти файлы для импорт (XML и картинки) в нашем репозитории на GitHub.
Интеграция дизайна слайдера в шаблон компонента bitrix:news.list
Разместим на странице 1.php, которую мы создали выше для этих целей компонент:
| <?$APPLICATION->IncludeComponent(
"bitrix:news.list", "", Array( "IBLOCK_ID" => "MAIN_SLIDER" ), false );?> |
Обращаем внимание на выделенную красным строку - мы сразу задаём в параметрах компонента КОД информационного блока!
Поскольку ваша сборка 1С-Битиркс может отличаться от той на которой делается данный урок, то у вас уже могли быть ранее созданы инфоблоки и ID не совпадает с нашим. Если вы следовали нашим инструкциям выше, то символьный код у вас будет идентичен нашему.
Копируем шаблон компонента дефолтный шаблон компонента списка новостей в шаблон сайта:
Теперь модифицируем шаблон компонента списка новостей /bitrix/templates/stylish/components/bitrix/news.list/main_slider/template.php:
| <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="slider"> <div class="camera_wrap"> <?foreach($arResult["ITEMS"] as $arItem):?> <div data-src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"></div> <?endforeach;?> </div> </div> |
Как видите, мы удалили всё лишнее и оставили только самое необходимое:
- подключение пролога
- разметку вокруг баннерного блока
- цикл для непосредственного вывода баннеров
- вывод картинки анонса
Поскольку слайдер выводится только на одной из страниц HTML вёрстки, то мы поместим вызов компонента слайдера во включаемую область, применяемую для файла.
Теперь осталось поместить код вызова компонента слайдера в файл включаемой области index_slider.php (собственно имя файла включаемой области состоит из имени файла для которого включаемая область отображается и идентификатора, который используется в вызове компонента включаемой области):
| <?$APPLICATION->IncludeComponent("bitrix:news.list", "main_slider", Array(
"IBLOCK_ID" => "MAIN_SLIDER", // Код информационного блока ), false );?> |
ВАЖНО! Не забудьте удалить файл (1.php в нашем случае) в котором велась разработка, когда он перестанет быть нужен!
В шаблоне же необходимо вызвать компонент:
| <?$APPLICATION->IncludeComponent(
"bitrix:main.include", "", Array( "AREA_FILE_SHOW" => "page", "AREA_FILE_SUFFIX" => "slider", "EDIT_TEMPLATE" => "" ) );?> |
Не забудьте удалить из папки /img/ в шаблоне сайта картики баннеров для слайда (slide1.jpg, slide2.jpg, slide3.jpg) - теперь слайды берутся компонентом из инфоблока!
Результаты работы данного урока, как всегда, можно скачать .
